<template>
  <view :style="[styles]" style="overflow: hidden">
    <u-button
      style="height: 100%"
      :type="attribute.type"
      :color="attribute.color || themeColor"
      :text="attribute.text"
      :customStyle="{
        color:
          attribute.color === '#ffffff' || themeColor === '#ffffff'
            ? 'black'
            : attribute.fontColor
            ? attribute.fontColor
            : '#ffffff',
      }"
      @click="handleBtnClick"
    />
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { callNavigateHook } from "../../../libs/navigateTo/index";
export default {
  inheritAttrs: false,
  name: `${COMPREIFX}button`,
  props: {
    attribute: Object,
    styles: Object,
  },
  computed: {
    themeColor() {
      return this.$theme.themeColor[this.attribute.type];
    },
  },
  methods: {
    handleBtnClick() {
      if (this.attribute.navigateType) {
        callNavigateHook({
          type: this.attribute.navigateType,
          target: this.attribute
        });
      } else {
        this.$emit("event", {
          eventName: "btnClick",
          attribute: this.attribute,
        });
      }
    },
  },
};
</script>

<style scoped></style>
